<script setup lang="ts">
import {ref} from 'vue'
import {StnIpt, IptTypeConst} from 'st-ui-vue3-navie'
import {ResponsiveCollapseSearch} from '@components'
import {useSysUserStore} from '../stores/sys-user-store'

// 搜索表单
const searchForm = ref({
  username: '',
  nickname: '',
  email: '',
  phone: '',
  gender: null,
  status: null,
})

// 性别选项
const genderOptions = [
  {
    label: '未知',
    value: 0
  },
  {
    label: '男',
    value: 1
  },
  {
    label: '女',
    value: 2
  }
]

// 状态选项
const statusOptions = [
  {
    label: '启用',
    value: 1,
  },
  {
    label: '禁用',
    value: 0,
  },
]

/**
 * 搜索处理函数
 */
const searchHandler = async (searchFormData: Record<string, any>) => {
  return await useSysUserStore().getUserDataByReq(searchFormData)
}
</script>

<template>
  <ResponsiveCollapseSearch
    :search-form-default="searchForm"
    :search-handler="searchHandler"
  >
    <StnIpt
      label="用户名"
      v-model:value="searchForm.username"
      :type="IptTypeConst.TEXT"
      placeholder="请输入用户名"
    />
    <StnIpt
      label="昵称"
      v-model:value="searchForm.nickname"
      :type="IptTypeConst.TEXT"
      placeholder="请输入昵称"
    />
    <StnIpt
      label="邮箱"
      v-model:value="searchForm.email"
      :type="IptTypeConst.TEXT"
      placeholder="请输入邮箱"
    />
    <StnIpt
      label="手机号"
      v-model:value="searchForm.phone"
      :type="IptTypeConst.TEXT"
      placeholder="请输入手机号"
    />
    <StnIpt
      label="性别"
      v-model:value="searchForm.gender"
      :type="IptTypeConst.SELECT"
      :options="genderOptions"
      placeholder="请选择性别"
      clearable
    />
    <StnIpt
      label="状态"
      v-model:value="searchForm.status"
      :type="IptTypeConst.SELECT"
      :options="statusOptions"
      placeholder="请选择状态"
      clearable
    />
  </ResponsiveCollapseSearch>
</template> 